import { CSSProperties } from 'vue';

export function useHoverMenu() {
  const sideBarHoverMenuItemWrapperStyle: CSSProperties = {
    userSelect: 'none',
    transition: 'background 20ms ease-in 0s',
    cursor: 'pointer',
    marginLeft: '4px',
    marginRight: '4px',
    borderRadius: ' 3px',
    width: 'calc(100% - 8px)',
  };
  const sideBarHoverMenuItemStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    lineHeight: '120%',
    width: '100%',
    userSelect: 'none',
    minHeight: '28px',
    fontSize: '14px',
  };
  const sideBarHoverMenuItemHeaderWrapperStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: '10px',
    marginRight: '4px',
  };
  const sideBarHoverMenuItemHeaderStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };
  const sideBarHoverMenuItemNameWrapperStyle: CSSProperties = {
    marginLeft: '6px',
    marginRight: '12px',
    minWidth: '0px',
    flex: '1 1 auto',
  };
  const sideBarHoverMenuItemNameStyle: CSSProperties = {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };
  const sideBarHoverSubMenuStyle: CSSProperties = {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    paddingLeft: '10px',
  };
  return {
    sideBarHoverMenuItemWrapperStyle,
    sideBarHoverMenuItemStyle,
    sideBarHoverMenuItemHeaderWrapperStyle,
    sideBarHoverMenuItemHeaderStyle,
    sideBarHoverMenuItemNameWrapperStyle,
    sideBarHoverMenuItemNameStyle,
    sideBarHoverSubMenuStyle,
  };
}
